<template>
  <div class="pub_bgColorFFF p20">
    <div class="header flex_space_between">
      <div class="header_left flex_start">
        <label class="">库存管理</label>
      </div>
      <div class="header_right flex_end">
        <!-- <el-button type="text" class=" customize_btn pub_button">
          <img src="@/assets/img/orderManagement/customize.png" alt="刷新" />
          <span class="ml5">自定义</span>
        </el-button> -->
        <div class="select_date ml12">
          <el-button type="text" class="select_date_btn pub_button">
            <span>{{ generalParams.dimensionStr }}</span>
            <img src="@/assets/img/orderManagement/arrowu_down.png" alt="箭头" class="ml5" />
          </el-button>
          <ul class="select_date_list">
            <li v-for="(item, key, index) in $staticData.filterDimension" :key="index" @click="filterDimension(key)">{{ item }}</li>
          </ul>
        </div>
        <div v-if="generalParams.dimension == 5" class="ml12">
          <el-date-picker v-model="params.timeRange" :picker-options="pickerOptions2" size="small" unlink-panels type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" class="pub_date_picker" :clearable="false" @change="changeTime" />
        </div>
      </div>
    </div>
    <div class="dataOverview  mt12">
      <div class="dataOverview_list">
        <div class="flex_space_between">
          <label class="dataOverview_title">库存总数量</label>
        </div>
        <div class="flex_space_between ">
          <div class="dataOverview_content_left ">
            <span class="dataOverview_num">{{ generalData.totalQty }}</span>
          </div>
          <img src="@/assets/img/stockManagement/dataOverview_1.png" class="dataOverview_content_img " alt="营收" />
        </div>
      </div>
      <div class="dataOverview_list">
        <div class="flex_space_between">
          <label class="dataOverview_title">库存总价值</label>
        </div>
        <div class="flex_space_between ">
          <div class="dataOverview_content_left ">
            <span class="dataOverview_num">{{ generalData.totalAmount }}</span>
          </div>
          <img src="@/assets/img/stockManagement/dataOverview_2.png" class="dataOverview_content_img " alt="营收" />
        </div>
      </div>
      <div class="dataOverview_list">
        <div class="flex_space_between">
          <label class="dataOverview_title">{{ stockLabel }}入库</label>
        </div>
        <div class="flex_space_between ">
          <div class="dataOverview_content_left ">
            <span class="dataOverview_num">{{ generalData.inQty }}</span>
          </div>
          <img src="@/assets/img/stockManagement/dataOverview_3.png" class="dataOverview_content_img " alt="营收" />
        </div>
      </div>
      <div class="dataOverview_list">
        <div class="flex_space_between">
          <label class="dataOverview_title">{{ stockLabel }}出库</label>
        </div>
        <div class="flex_space_between ">
          <div class="dataOverview_content_left ">
            <span class="dataOverview_num">{{ generalData.outQty }}</span>
          </div>
          <img src="@/assets/img/stockManagement/dataOverview_4.png" class="dataOverview_content_img " alt="营收" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'; // ES 2015
export default {
  data() {
    return {
      params: {
        timeRange: []
      },
      generalParams: {
        //统计概览参数
        dimensionStr: '今日',
        dimension: 1 //"1"-日   "2"-月   "3"-季度    "4"-年
      },
      stockLabel: '', //
      generalData: {
        totalQty: 0, //库存总数量
        totalAmount: 0, //库存总价值
        inQty: 0, //入库数量
        outQty: 0 // 出库数量
      },
      maxDate: null,
      pickerOptions2: {
        onPick: range => {
          if (range && range.minDate) {
            const maxTime = range.minDate.getTime() + 730 * 24 * 60 * 60 * 1000;
            this.maxDate = new Date(maxTime);
          } else {
            this.maxDate = null;
          }
        },
        disabledDate: date => {
          // 如果没有设置maxDate，则不禁用任何日期
          if (!this.maxDate || !date) {
            return false;
          }
          // 禁用超过15天范围的日期
          return date > this.maxDate;
        }
      }
    };
  },
  created() {
    this.filterDimension(1);
    this.getStatisticsTotal();
  },
  methods: {
    //选择日期触发
    changeTime() {
      this.getStatisticsGeneral();
    },
    //选择维度（日、月、季度、年）
    filterDimension(type) {
      this.generalParams = {
        dimension: type,
        dimensionStr: this.$staticData.filterDimension[type]
      };
      this.stockLabel = this.generalParams.dimensionStr;
      this.params.timeRange = [];
      if (type * 1 < 5) {
        this.getStatisticsGeneral();
      }
    },
    async getStatisticsGeneral() {
      let params = null;
      if (this.params.timeRange.length > 0) {
        params = { startDate: dayjs(this.params.timeRange[0]).format('YYYY-MM-DD'), endDate: dayjs(this.params.timeRange[1]).format('YYYY-MM-DD') };
        this.stockLabel = this.params.startTime;
      } else {
        params = {
          ...this.generalParams
        };
      }
      let res = await this.$api.post(this.$url.inventoryStatisticsStatisticsGeneral, params);
      this.generalData = {
        ...this.generalData,
        ...res.data
      };
    },
    async getStatisticsTotal() {
      let res = await this.$api.post(this.$url.inventoryStatisticsStatisticsTotal);
      res.data.totalAmount = (parseInt(res.data.totalAmount * 100) / 100).toFixed(2);
      this.generalData = {
        ...this.generalData,
        ...res.data
      };
    }
  }
};
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  .header_left {
    label {
      font-size: 18px;
      color: #000000;
    }
    .header_statistics_time {
      font-weight: 400;
      font-size: 16px;
      color: #858d9d;
    }
    .header_statistics_btn {
      margin-left: 10px;
      width: 16px;
      height: 16px;
      padding: 0px;
      border: 0px;
    }
  }
  .header_right {
    .customize_btn {
      width: 94px;
    }
    .select_date_lis:hover,
    .select_date:hover .select_date_list {
      display: block;
    }
    .select_date_btn,
    .select_date {
      width: 80px;
      position: relative;
      .select_date_list {
        display: none;
        z-index: 10000;
        position: absolute;
        top: 36px;
        left: 0px;
        width: 80px;
        box-shadow: 0px 1px 2px 0px rgba(82, 88, 102, 0.06);
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #e0e2e7;
        padding-top: 4px;
        box-sizing: border-box;
        li {
          width: 100%;
          text-align: center;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          color: #a3a9b6;
          background: #ffffff;
          cursor: pointer;
          &:hover {
            background: #f4f5f6;
            border-radius: 6px 6px 6px 6px;
            color: #667085;
          }
        }
      }
    }
  }
}
.dataOverview {
  width: 100%;
  overflow: hidden;
}
.dataOverview_list {
  &:nth-child(1) {
    background: #d8f3ee;
  }
  &:nth-child(2) {
    background: #fef0f0;
  }
  &:nth-child(3) {
    background: #ffe9cc;
  }
  &:nth-child(4) {
    background: #d5eff9;
  }
  & + .dataOverview_list {
    margin-left: 16px;
  }
  float: left;
  width: 395px;
  height: 128px;
  border-radius: 16px 16px 16px 16px;
  padding: 20px;
  box-sizing: border-box;
  & div {
    width: 100%;
    .dataOverview_title {
      font-size: 18px;
      color: #667085;
    }
    .dataOverview_btn {
      width: 32px;
      height: 32px;
    }
    .dataOverview_num {
      font-size: 24px;
      color: #0a0b0d;
      font-weight: 600;
    }
    .dataOverview_trnedDown {
      span {
        font-size: 12px;
        color: #1eb398;
      }
    }
    .dataOverview_trnedDown,
    .dataOverview_trnedUp {
      min-width: 59px;
      width: auto;
      height: 20px;
      background: #edfcf9;
      border-radius: 6px 6px 6px 6px;
      padding: 2px 4px;
      box-sizing: border-box;
      span {
        font-size: 12px;
        color: #1eb398;
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
    .dataOverview_trnedDown {
      background: #fef0f0;
      span {
        color: #f16363;
      }
    }
    .dataOverview_trneLabel {
      font-size: 12px;
      color: #667085;
      display: block;
    }
  }
  .dataOverview_content_img {
    width: 172px;
    height: 75px;
  }
}
</style>
